<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>侦听器版本</title>
</head>
<body>
<div id="app">
    <H1>姓：{{ familyName }}</H1>
    <H1>名：{{ givenName }}</H1>

    <h1>姓名：{{ fullName }}</h1>
</div>

<script type="module">
    import {createApp, ref, computed, watch} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let familyName = ref("kevin")
                let givenName = ref("abcque")
                // 问题：这样写是没有办法通过修改 fullNane 来更新 familyName 和 givenName
                // let fullName = computed(
                //     () => {
                //         return familyName.value + " " + givenName.value
                //     }
                // )

                // 如果不需要通过 fullName 解析得到 familyName 和 givenName，就不需要使用 计算属性
                /*let fullName = computed(
                    {
                        get: function (test) {
                            console.log("调用了 fullName 计算属性");
                            return familyName.value + " " + givenName.value
                        },
                        set: function (name) {
                            let split = name.split(" ");
                            familyName.value = split[0]
                            givenName.value = split[1]
                        }
                    }
                )*/

                let fullName = ref(familyName.value + " " + givenName.value)

                watch(familyName, (val) => {
                    console.log("familyName 发生了变化");
                    fullName.value = val + " " + givenName.value
                })

                watch(givenName, (val) => {
                    console.log("givenName 发生了变化");
                    fullName.value = familyName.value + " " + val
                })

                // 循环处理，检测到 fullName 变化没有问题
                // 但是赋值的时候会引起  givenName 和 familyName 发生变化，再次调用 fullNanme
                // 总结：要么处理分开的情况，要么处理整体。不要两个同时处理。
                // 缺陷：要么处理分开的情况，要么处理整体。不要两个同时处理。
                /*watch(fullName, (val) =>{
                    console.log("fullName 发生了变化");
                    fullName.value = val
                    // let split = name.split(" ");
                    // familyName.value = split[0]
                    // givenName.value = split[1]
                })*/

                return {
                    familyName, givenName, fullName
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>